<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/10
  Time: 11:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="utf-8">
  <title>
    网上银行注册
  </title>
  <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" >
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url("/static/img/背景.jpg");
    }
    img{
      width: 140px;
      margin-left: 80px;
      margin-top: 80px;
    }
    #d{
      /* border: 1px solid red; */
      position: relative;/* 相对于原始位置定位 */
      top:160px;
      left: 160px;
    }
    #sp1,#sp2,#sp3{
      color: white;
    }
    #sp1{
      font-size: 50px;
      font-weight: bold;
    }
    #sp3{
      font-size: 14px;
      font-weight: 100;
      margin-left: 80px;
      position: relative;
      top: 600px;
    }
    #db{
      width: 480px;
      height: 640px;
      position: absolute;
      top:70px;
      right: 140px;
      background: rgba(255, 255, 255,0.9);
      border-radius: 16px;/* 圆角 */
    }
    #d1{
      margin-top: 50px;
      margin-left: 30px;
    }
    .t{
      width: 350px;
      height: 40px;
      border-radius: 4px;
      outline: none;/* 去轮廓 */
      border: 0.5px gray solid;/* 加边框 */
      padding-left: 10px;
      margin-left: 5px;
    }
    .s{
      font-weight: 100;
      color: rgba(0, 0, 0, 0.8);/* 带透明度的三原色，透明度为0.8 */

    }
    #d2{
      margin-left: 30px;
      margin-top: 50px;
      position: relative;
      bottom: 30px;
    }
    #b{
      height: 50px;
      width: 420px;
      background: #2E58FF;
      border-radius: 50px;
      outline: none;
      color: white;
      border: none;
      font-size: 16px;
      margin-left: 32px;
      margin-top: 30px;
      position: relative;
      bottom: 100px;
    }
    #sp > a{
      text-decoration: none;
      color: #2E58FF;
    }
    #d3{
      position: relative;
      bottom: 30px;
    }
  </style>

  <script>
    $(function () {
      $("#b").click(function () {
        var flag = true;
        if ($("#phone").val()==null||$("#phone").val()===""){
          flag = false;
          return flag;
        }
        if ($("#password").val()==null||$("#password").val()===""){
          flag = false;
          return flag;
        }
        if ($("#password2").val()==null||$("#password2").val()===""){
          flag = false;
          return flag;
        }
        if ($("#verifycode").val()==null||$("#verifycode").val()===""){
          flag = false;
          return flag;
        }
        if (flag){
          //alert($("#phone").val());
          var phone = $("#phone").val();
          //alert($("#password").val());
          var password = $("#password").val()
          var password2 = $("#password2").val()
          //alert($("#verifycode").val());
          var verficode = $("#verifycode").val();
          location.href = "${pageContext.request.contextPath}/userServlet?action=register&phone="+phone+"&password="+password2+"&verifycode="+verficode;
        }
      })
      $("#code_img").click(function () {
        this.src = "/kaptcha.jpg?date="+new Date().getTime();
      })
      $("#phone").focus(function () {
        $("#phone").css("border-color","blue");
        $(".errorMsg").text("");
        return false;
      })
      $("#phone").blur(function () {
        $("#phone").css("border-color","gray");
        var regExp = new RegExp("^1[0-9]{10}$");
        var value = $("#phone").val();
        if (!regExp.test(value)){
          $(".errorMsg").text("手机号格式必须为1开头，共11位");
        }
      })
      $("#password").focus(function () {
        $("#password").css("border-color","blue");
        $(".errorMsg").text("")
      })
      $("#password").blur(function () {
        $("#password").css("border-color","gray");
        var regExp = new RegExp("^[0-9a-zA-z_]{8,16}$");
        var value = $("#password").val();
        if (!regExp.test(value)){
          $(".errorMsg").text("密码格式必须为8-16位的数字、英文或_");
        }
      })
      $("#password2").focus(function () {
        $("#password2").css("border-color","blue");
        $(".errorMsg").text("")
      })
      $("#password2").blur(function () {
        $("#password2").css("border-color","gray");
        var value = $("#password").val();
        var value2 = $("#password2").val();
        if (value!=value2){
          $(".errorMsg").text("两次密码不一致");
        }
      })
      $("#verifycode").focus(function (){
        $("#verifycode").css("border-color","blue");
      })
      $("#verifycode").blur(function (){
        $("#verifycode").css("border-color","gray");
      })
    })
  </script>
</head>
<body>
<div id="d">
  <span id="sp1">欢迎您来到网上银行</span>
</div>
<span id="sp3">帮助中心 丨 2022&nbsp;Bank</span><!-- 连续多个空格和回车会折叠，所以想要多个空格显示在页面要用&nbsp;为一个空格，多来几个即可 -->
<div id="db" >
  <div id="d1">
    <span style="font-weight: bold;font-size: 40px;">欢迎注册</span>
    <br>
    <span style="font-size: 14px;color: darkgray;">已有帐号？</span>
    <a href="${pageContext.request.contextPath}/pages/user/login.jsp" style="font-size: 14px;text-decoration: none;font-weight: 100;">登录</a>
  </div>
  <div id = "d2">
    <span id="spp" class="errorMsg" style="color: red">${requestScope.msg}</span><br>
    <span class="s">手机号</span>
    <input class="t" id="phone" type="text" required placeholder="可用于登录和找回密码" <%--style="color: #2E58FF"--%>>
    <br>
    <br>
    <br>
    <br>
    <span class="s">密&nbsp;&nbsp;&nbsp;&nbsp;码</span>
    <input class="t" id="password" type="password" required placeholder="请输入登陆密码">
    <br>
    <br>
    <br>
    <br>
    <span class="s">确认密码</span>
    <input class="t" id="password2" type="password" required placeholder="请对比登陆密码">
    <br>
    <br>
    <br><br>
    <span class="s">验证码</span>
    <input type="text"  id="verifycode" class="t" placeholder="请输入验证码" style="width: 200px;">
    <img id="code_img" alt="" src="/kaptcha.jpg" style="float: right; position: relative; right: 45px; bottom: 120px; width: 135px;height: 40px;">
  </div>
  <div id="d3">
    <input type="hidden" name="action" value="login">
    <button id="b">注册</button>
    <br><br>
  </div>
</div>
</body>
</html>
